Chuyển khoản qua mã QR (VietQR) đang dần trở thành xu hướng phổ biến, giúp việc thanh toán trở nên nhanh chóng và tiện lợi hơn. Trong bài viết này, chúng ta sẽ cùng nhau xây dựng một công cụ cho phép tạo mã QR chuyển khoản dành cho nhiều ngân hàng, ví điện tử. Ngoài việc tạo QR, công cụ này cũng hỗ trợ truyền thông tin chủ tài khoản, số tiền, và nội dung chuyển khoản. Từ đó, người dùng có thể quét và thanh toán trong tích tắc.
Nội dung công cụ này bao gồm ba phần chính:
- Cấu trúc HTML để hiển thị giao diện người dùng.
- JavaScript để thực hiện việc gọi API, kiểm tra ràng buộc đầu vào, và tạo link mã QR.
- CSS để tạo kiểu cho form, nút bấm, khung hiển thị kết quả,…
Bài viết hướng dẫn sẽ đi theo từng bước một, từ việc thiết lập giao diện, code logic đến việc thêm CSS trang trí. Hy vọng sau khi đọc xong, bạn có thể hiểu được cách tùy chỉnh công cụ theo ý muốn của mình.
Các bước thực hiện
Bước 1: HTML
Bạn hãy dán đoạn code HTML dưới đây vào vị trí bạn muốn đặt công cụ ở đó hoặc tạo một tệp HTML (ví dụ: index.html) cũng được. Mục đích là khởi tạo form nhập liệu, nút bấm cũng như vùng hiển thị thông báo và ảnh QR.
<div class="main-container">
<div class="form-group">
<label for="bankSelector">Chọn Ngân Hàng <span class="text-red">*</span></label>
<select class="tool-input" id="bankSelector"></select>
</div>
<div class="form-group">
<label for="accountNumber">Nhập STK <span class="text-red">*</span></label>
<input class="tool-input" id="accountNumber" placeholder="Số tài khoản" type="text" />
</div>
<div class="form-group">
<label for="accountName">Nhập tên chủ TK</label>
<input class="tool-input" id="accountName" placeholder="Chủ tài khoản" type="text" />
</div>
<div class="form-group">
<label for="amountInput">Nhập số tiền (Không nhập thì người quét mã có thể tự nhập)</label>
<input class="tool-input" id="amountInput" placeholder="Số tiền" type="number" />
</div>
<div class="form-group">
<label for="transferDesc">Nội dung chuyển khoản</label>
<input class="tool-input" id="transferDesc" placeholder="Nội dung chuyển khoản" type="text" />
</div>
<button class="tool-action" id="createQRButton" onclick="createQr()">Tạo mã CK</button>
<div id="notification" class="notification-area"></div>
<div class="result-section">
<label for="resultContainer" class="result-label">Kết quả hiển thị ở đây</label>
<div id="resultContainer" class="result-container">
<img
alt="Công Cụ Tạo Mã VietQR Chuyển Khoản"
src="https://img.vietqr.io/image/NCB-190003048334-print.jpg?addInfo=Ma%20QR%20DEMO&accountName=PHAM%20DO%20MINH%20THONG"
/>
</div>
</div>
</div>Giải thích:
- Thẻ
<select>có id là “bankSelector” dành cho việc lựa chọn ngân hàng. - Các ô input như “Nhập STK”, “Nhập tên chủ TK”, “Nhập số tiền” cho phép người dùng nhập thông tin chuyển khoản.
- Nút “Tạo mã CK” sẽ gọi hàm JavaScript để kiểm tra đầu vào và tạo link QR.
- Thẻ
<div id="resultContainer">sẽ là nơi hiển thị ảnh QR sau khi tạo thành công.
Bước 2: Thêm JavaScript
Tiếp theo, bạn cần thêm đoạn mã JavaScript ngay trước thẻ đóng trong file HTML. Phần script có chức năng gọi API để lấy danh sách ngân hàng, sau đó tạo ra ảnh VietQR tương ứng.
<script>
// Lấy tham chiếu đến khu vực hiển thị thông báo
var notificationEl = document.getElementById('notification');
// Gọi API ngân hàng (ví dụ)
fetch('https://api.vietqr.io/v2/banks')
.then(response => response.json())
.then(data => {
var banks = data.data;
var option_banks = '';
Object.keys(banks).forEach(key => {
option_banks += `
<option id="bank_${banks[key].code}" value="${banks[key].code}" data-logo="${banks[key].logo}"
data-name="${banks[key].name}" data-bin="${banks[key].bin}">
${banks[key].short_name}
</option>
`;
});
document.querySelector('#bankSelector').innerHTML = option_banks;
});
function createQr() {
notificationEl.innerHTML = '';
var bank = document.getElementById('bankSelector').value;
var stk = document.getElementById('accountNumber').value;
var chutk = document.getElementById('accountName').value;
var amount = document.getElementById('amountInput').value;
var nd = document.getElementById('transferDesc').value;
// Kiểm tra độ dài STK
if (stk.toString().length === 0) {
notificationEl.innerHTML = 'Vui lòng nhập STK';
return;
}
// Kiểm tra độ dài số tiền
if (amount.toString().length >= 13) {
notificationEl.innerHTML = 'Số tiền quá lớn (nhỏ hơn 13 ký tự)';
return;
}
var baseImg = `https://img.vietqr.io/image/${bank}-${stk}-print.jpg`;
var img = new URL(baseImg);
// Gắn tham số vào URL
if (amount.toString().length !== 0) {
img.searchParams.set("amount", amount);
}
if (nd.toString().length !== 0) {
img.searchParams.set("addInfo", nd);
}
if (chutk.toString().length !== 0) {
img.searchParams.set("accountName", chutk.toUpperCase());
}
var finalImgUrl = img.toString();
document.getElementById('resultContainer').innerHTML = `
<a href="${finalImgUrl}" data-fancybox="gallery">
<img alt="Tạo Mã QR Chuyển Khoản" src="${finalImgUrl}">
</a>
`;
notificationEl.innerHTML = `Đã tạo QR chuyển khoản tới ${stk} - ${bank}`;
}
</script>Giải thích:
- Biến notificationEl trỏ tới phần tử
<div id="notification">để hiển thị thông báo (như lỗi hoặc trạng thái thành công). - Gọi API VietQR.io để lấy danh sách ngân hàng, cập nhật vào
<select>bankSelector. - Hàm createQr() lấy dữ liệu người dùng nhập, sau đó kiểm tra điều kiện (ví dụ: STK rỗng, số tiền vượt quá độ dài cho phép).
- URL mã QR mặc định có dạng “https://img.vietqr.io/image/[Mã Ngân Hàng]-[STK]-print.jpg”. Mỗi tham số amount, addInfo, accountName được gắn vào URL nếu giá trị được nhập.
- Sau khi xây dựng URL cuối cùng, phần tử
<div id="resultContainer">hiển thị ảnh QR bằng thẻ<img>.
Bước 3: Thêm CSS
Để giao diện đẹp hơn và dễ nhìn, chúng ta cần thêm một đoạn CSS. Bạn có thể chèn đoạn CSS này vào trong thẻ <style> để ngay bên dưới phần code HTML, hoặc tách riêng thành file CSS.
<style>
/* Thiết lập reset cơ bản */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Thiết lập font chữ, màu nền, và căn giữa tổng thể */
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: #f3f4f6;
color: #333;
}
/* Phần chứa chính */
.main-container {
max-width: 600px;
margin: 30px auto;
background-color: #fff;
padding: 20px 25px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* Phân nhóm nhãn và input */
.form-group {
margin-bottom: 16px;
}
/* Style cho nhãn (label) */
.form-group label {
display: block;
margin-bottom: 6px;
font-weight: 600;
color: #444;
}
/* Input cơ bản */
.tool-input {
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 6px;
outline: none;
font-size: 14px;
transition: border-color 0.2s;
}
/* Hiệu ứng khi focus vào ô nhập */
.tool-input:focus {
border-color: #44a8f2;
}
/* Nút tạo QR */
.tool-action {
background-color: #44a8f2;
color: #fff;
font-size: 15px;
padding: 10px 18px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s;
}
/* Hiệu ứng hover cho nút */
.tool-action:hover {
background-color: #3594e2;
}
/* Khu vực hiển thị thông báo */
.notification-area {
margin: 10px 0;
font-weight: 500;
color: #e11d48;
min-height: 20px;
}
/* Khu vực kết quả QR */
.result-section {
margin-top: 20px;
}
.result-label {
font-weight: 600;
color: #444;
display: block;
margin-bottom: 8px;
}
/* Khung chứa kết quả */
.result-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
border: 1px dashed #ccc;
border-radius: 8px;
padding: 10px;
background-color: #fafafa;
}
/* Ảnh QR hiển thị */
.result-container img {
max-width: 100%;
height: auto;
display: block;
}
/* Màu chữ đỏ trong dấu * */
.text-red {
color: #d62828;
}
</style>
Giải thích:
- Các đoạn đặt margin, padding, box-sizing giúp reset CSS để giao diện trông đồng bộ.
- Thẻ
.main-containerchịu trách nhiệm bao bọc toàn bộ phần nội dung, canh lề giữa và thêm đổ bóng để giao diện nổi bật hơn. - Mỗi
.form-grouplà một khối gồm label và input, được dàn hàng theo chiều dọc. .tool-inputvà.tool-actionlà các lớp tùy biến cho ô nhập và nút bấm, giúp hiển thị đẹp và rõ ràng hơn..notification-areađược sử dụng để hiển thị các đoạn thông báo hoặc cảnh báo ở phía trên.
Demo
Kết Luận
Vậy là chúng ta đã hoàn chỉnh công cụ tạo mã VietQR chuyển khoản. Sau khi cấu trúc xong tệp HTML, thêm đoạn mã JavaScript để gọi API và xử lý thông tin người dùng, cuối cùng áp dụng CSS để có giao diện bắt mắt. Bạn có thể tự thay đổi đường dẫn API, tùy chỉnh logic tạo QR hoặc thậm chí thay đổi giao diện CSS cho phù hợp với nhu cầu.
Chúc bạn thành công khi tích hợp tính năng này vào website hoặc ứng dụng của mình! Nếu có câu hỏi hay góp ý, hãy để lại bình luận để chúng ta có thể cùng nhau học hỏi và phát triển thêm nhé.
